<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1">
    <title>行人布控平台</title>
    <meta name ="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="js/powerange/powerange.css" />
    <script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
    <script type="text/javascript" src="js/moment.min.js"></script>
    <script type="text/javascript" src="js/videoplayer/swfobject.js"></script>
    <script type="text/javascript" src="js/powerange/powerange.js"></script>
  </head>
  <body>

    <div class="main-box">
      <header class="nav-box">
        行人布控平台
      </header>
      <main class="body-box">

        <!-- 视频播放及平面图 -->
        <div class="left-box">
          <!-- 视频播放 -->
          <!-- <div> -->
            <ul class="cameras-box">
              <li>
                <div>
                  <div id="camera1"></div>
                </div>
              </li>
              <li>
                <div>
                  <div id="camera2"></div>
                </div>
              </li>
              <li>
                <div>
                  <div id="camera3"></div>
                </div>
              </li>
            </ul>
          <!-- </div> -->
          <!-- 平面图 -->
          <div class="plan-box">
            <!-- 平面图显示区 -->
            <div class="plan-img">
              <img src="image/plan_img.jpg" alt="" />
              <canvas id="planCanvas"></canvas>
              <div class="plan-camera plan-camera1" style="left:374px;top:244px;transform:rotate(35deg)">
                <input type="button" name="camera1btn" cameraId="camera1" value="" />
              </div>
              <div class="plan-camera plan-camera3" style="left:760px;top:204px;transform:rotate(-40deg)">
                <input type="button" name="camera2btn" cameraId="camera2" value="" />
              </div>
              <div class="plan-camera plan-camera2" style="left:732px;top:-30px;transform:rotate(-110deg)">
                <input type="button" name="camera3btn" cameraId="camera3" value="" />
              </div>
            </div>
            <!-- 中屏摄像头画面区 -->
            <div class="middle-camera-box">
            </div>
          </div>
        </div>

        <!-- 人脸照片及结果 -->
        <div class="right-box">
          <!-- 人脸照片 -->
          <div class="search-box">
            <!-- 目标照片 -->
            <div class="person-info">
              <div class="person-photo" title="选择图片">
                <img src="image/default_img.jpg" id="personImg" alt="" default="true" />
                <label for="uploadImg">
                  <input type="file" id="uploadImg" accept="image/jpeg,image/jpg,image/png,image/gif" />
                </label>
              </div>
              <input type="button" name="beginSearch" class="search-btn animate" value="布控目标">
            </div>
            <!-- 设置相似度 -->
            <div class="set-similarity">
              <input type="text" id="js-range" style="display: none;">
            </div>
          </div>
          <!-- 搜索结果 -->
          <div class="result-box">
            <!-- <p>请先上传图片再点击“布控目标”</p> -->
            <p>
              <em>相似度<span id="similarityValue"></span>以上</em>
            </p>
            <ul>
            </ul>
          </div>
        </div>

      </main>
    </div>

    <script type="text/javascript" src="js/index.js"></script>
  </body>
</html>
